<template>
  <div class="form-config-container">
    <el-form label-position="right" label-suffix="：" label-width="130px" size="default">
      <el-collapse v-model="collapse">
        <el-collapse-item name="1" title="基本属性">
          <el-form-item label="标签对齐方式">
            <el-select v-model="localData.labelPosition" placeholder="标签对齐方式">
              <el-option label="左对齐" value="left" />
              <el-option label="右对齐" value="right" />
              <el-option label="顶部对齐" value="top" />
            </el-select>
          </el-form-item>
          <el-form-item label="标签宽度">
            <el-input-number v-model="localData.labelWidth" :min="80" :max="200" :step="10" controls-position="right" placeholder="标签宽度" style="width: 100%" />
          </el-form-item>
          <el-form-item label="标签后缀">
            <el-input v-model="localData.labelSuffix" placeholder="标签后缀" />
          </el-form-item>
          <el-form-item label="项之间的间隔">
            <el-input-number v-model="localData.gutter" :min="0" :max="60" :step="5" controls-position="right" placeholder="项之间的间隔" style="width: 100%" />
          </el-form-item>
          <el-form-item label="表单样式">
            <el-select v-model="localData.formClass" multiple clearable>
              <el-option v-for="(item, index) in classNames" :label="item.className" :value="item.className" :key="index" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="多分组转标签">
            <el-switch v-model="localData.tabs" active-color="#409EFF" />
          </el-form-item> -->
          <el-form-item label="标签类型" v-if="localData.tabs">
            <el-select v-model="localData.tabsType" placeholder="请选择类型">
              <el-option label="普通" value="-"> </el-option>
              <el-option label="卡片" value="card"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="显示按钮">
            <el-switch v-model="localData.menuBtn" active-color="#409EFF" />
          </el-form-item>
          <el-form-item label="显示提交按钮" v-if="localData.menuBtn">
            <el-switch v-model="localData.submitBtn" active-color="#409EFF" />
          </el-form-item>
          <el-form-item label="提交按钮的文字" v-if="localData.menuBtn && localData.submitBtn">
            <el-input v-model="localData.submitText" placeholder="提交按钮的文字" />
          </el-form-item>

          <el-form-item label="显示清空按钮" v-if="localData.menuBtn">
            <el-switch v-model="localData.emptyBtn" active-color="#409EFF" />
          </el-form-item>
          <el-form-item label="清空按钮的文字" v-if="localData.menuBtn && localData.emptyBtn">
            <el-input v-model="localData.emptyText" placeholder="提交按钮的文字" />
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="2" title="自定义函数">
          <custom-func-config v-model="localData.funcs" :options="data" />
        </el-collapse-item>
        <el-collapse-item name="3" title="自定义样式类">
          <custom-class-config v-model="localData.classes" :options="data" />
        </el-collapse-item>
        <el-collapse-item name="4" title="字段显隐/启用规则配置">
          <display-rule-config v-model="localData.displayRules" :options="data" />
        </el-collapse-item>
        <el-collapse-item name="5" title="数据校验规则配置">
          <validate-rule-config v-model="localData.validateRules" :options="data" />
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>

<script>
import customFuncConfig from './components/customFuncConfig.vue';
import displayRuleConfig from './components/displayRule/displayRuleConfig.vue';
import validateRuleConfig from './components/validateRule/validateRuleConfig.vue';
import customClassConfig from './components/customClass/customClassConfig.vue';

export default {
  name: 'FormConfig',
  components: { customFuncConfig, displayRuleConfig, validateRuleConfig, customClassConfig },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    formModelDataFromDesign: {
      type: Object,
      default: () => {}
    },
    isDynamic: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      options: {
        fullScreen: false,
        minimap: {
          enabled: false
        }
      },
      options2: {
        fullScreen: false,
        minimap: {
          enabled: false
        }
      },
      tableData: [],
      localData: {}
    };
  },
  computed: {
    // ...mapState({
    //   userName: (state) => state.name
    // })
    // 获取样式类名
    classNames() {
      return this.localData.classes ? this.localData.classes : [];
    }
  },
  watch: {
    data: {
      handler(newVal) {
        console.log('data变了', newVal);
        // 处理老数据数据结构问题
        if (newVal) {
          this.localData = newVal;
          this.initData();
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal);
      },
      deep: true
    }
  },
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    handleRemoveFields(index) {
      this.localData.initDataDicData.splice(index, 1);
    },
    handleAddFields() {
      const i = Math.ceil(Math.random() * 99999);
      if (!this.localData.initDataDicData) {
        this.localData.initDataDicData = [{ label: `字段${i}`, value: `col_${i}` }];
        // this.$set(this.localData, 'initDataDicData', [{ label: `字段${i}`, value: `col_${i}` }])
      } else {
        this.localData.initDataDicData.push({
          label: `字段${i}`,
          value: `col_${i}`
        });
      }

      if (!this.localData.initDataDicData2) {
        this.localData.initDataDicData2 = [{ label: `字段${i}`, value: `col_${i}` }];
        // this.$set(this.localData, 'initDataDicData2', [{ label: `字段${i}`, value: `col_${i}` }])
      } else {
        this.localData.initDataDicData2.push({
          label: `字段${i}`,
          value: `col_${i}`
        });
      }
    },
    removeRow(index) {
      this.localData.showRule.splice(index, 1);
    },
    removeRow2(index) {
      this.localData.saveRule.splice(index, 1);
    },

    // 老数据问题处理
    initData() {
      if (!this.localData.funcs) {
        this.localData.funcs = [];
      }
      if (!this.localData.classes) {
        this.localData.classes = [];
      }
      if (!this.localData.displayRules) {
        this.localData.displayRules = [];
      }
      if (!this.localData.validateRules) {
        this.localData.validateRules = [];
      }
    }
  }
};
</script>

<style lang="scss" scoped>
:deep(.el-form-item--default) {
  margin-bottom: 8px;
}
</style>